<template>
  <div>
    <h2>{{ msg }}</h2>
    <button @click="fanzhuan">翻转</button>
    <ul>
      <li>{{ obj.name }}</li>
      <li>{{ obj.sex }}</li>
      <li>{{ obj.age }}</li>
      <li>{{ obj.age >= 18 ? "成年了" : "未成年" }}</li>
      <li>{{ arr }}</li>
      <li>{{ num >= 0.5 ? "yes" : num }}</li>
      <li><img :src="imageURL" alt="" /></li>
    </ul>
    <hr />
    <input
      :disabled="isDisabled"
      @keyup.delete="keyup"
      @input="iptchange" v-model="isValue"
    />
    <button @click="onDisabled">{{ isDisabled ? "启" : "禁" }} 用</button>
    <div>
      <p @click.once="str">
        点击<a href="http://www.mi.com" @click.prevent.stop>小米</a>
      </p>
      <h3>商品数量：{{ num }}</h3>
      <button @click="num > 5 ? numDown(5) : (num = 1)">-5</button>
      <button @click="num = num > 1 ? num - 1 : 1">-1</button>
      <button @click="num = num + 1">+1</button>
      <button @click="numUp(5)">+5</button>
    </div>
  </div>
</template>

<script>
import imageURL from "../src/assets/1.gif";
export default {
  name: "App",
  data() {
    return {
      imageURL,
      msg: "hello,vue",
      obj: {
        name: "aks",
        sex: "男",
        age: 16,
      },
      arr: [1, 2, 3, 4],
      num: Math.random(),
      isDisabled: true,
      num: 1,
      isValue: "",
    };
  },
  methods: {
    onDisabled() {
      this.isDisabled = !this.isDisabled;
    },
    numUp(n) {
      this.num = this.num + n;
    },
    numDown(n) {
      this.num = this.num - n;
    },
    str() {
      console.log("123");
    },
    iptchange(e) {
      this.isValue = e.target.value;
    },
    keyup() {
      this.isValue = "";
    },
    fanzhuan() {
      // this.msg = [...this.msg].reverse().join("");
      this.msg = this.msg.split("").reverse().join("");
    },
  },
};
</script>

<style scoped>
</style>
